<template>
	<view class="container ">
		<u-navbar :leftText="pageTitle" @leftClick="goBack" leftIconColor="#1D2129" bgColor="transparent">
		</u-navbar>
		<view class="content">
			<scroll-view scroll-y class="content_scroll_view">
				<u-form ref="form" labelPosition="left" :rules="rules" :model="formData" labelWidth="auto"
					:labelStyle="labelStyle">
					<view class="item_card">
						<view class="card_title">基础信息</view>
						<u-form-item label="活动名称" prop="name" required>
							<u--input v-model="formData.name" placeholder="请输入活动名称 (限20个字)" maxlength="20" border="none"
								inputAlign="right"></u--input>
						</u-form-item>
						<view class="divider no_margin_bottom"></view>
					</view>
					<view class="item_card">
						<view class="card_title">活动规则</view>
						<u-form-item label="参与方法" prop="type" class="no_margin_left"
							:class="isEdit ? 'form_item_disabled' : ''">
							<view class="custom_input_container" :style="{ 'pointer-events': isEdit ? 'none' : 'auto' }"
								@click="showPop('canyu', 'type')">
								<u--input v-model="labelMap.type" placeholder="请选择参与方法" border="none" inputAlign="right"
									readonly class="custom_input"></u--input>
							</view>
							<u-icon name="arrow-right" color="#191919" class="arrow_right"></u-icon>
						</u-form-item>
						<view class="divider"></view>
						<template v-if="formData.type == 1">
							<u-form-item label="口令内容" prop="commandWord" required
								:class="isEdit ? 'form_item_disabled' : ''">
								<u--input v-model="formData.commandWord" maxlength="20"
									:style="{ 'pointer-events': isEdit ? 'none' : 'auto' }" placeholder="请输入口令内容 (限20个字)"
									border="none" inputAlign="right"></u--input>
							</u-form-item>
							<view class="divider"></view>
							<u-form-item label="口令查看方式" prop="commandShowType" class="no_margin_left"
								:class="isEdit ? 'form_item_disabled' : ''">
								<view class="custom_input_container" :style="{ 'pointer-events': isEdit ? 'none' : 'auto' }"
									@click="showPop('klView', 'commandShowType')">
									<u--input v-model="labelMap.commandShowType" placeholder="请选择口令查看方式" border="none"
										inputAlign="right" readonly class="custom_input"></u--input>
								</view>
								<u-icon name="arrow-right" color="#191919" class="arrow_right"></u-icon>
							</u-form-item>
							<view class="left_btn" @click="viewExample('kl')">查看示例</view>
							<view class="divider"></view>
						</template>
						<template v-if="formData.type == 3">
							<u-form-item label="人数设置" prop="minInviteUserNum" key="minInviteUserNum" required>
								<view class="form_right">
									<view class="input_number">
										<input v-model="formData.minInviteUserNum" maxlength="2" class="input_border"
											type="number" @input="userNumChange"></input>
									</view>
								</view>
							</u-form-item>
							<view class="divider"></view>
						</template>
						<template v-if="formData.type == 4">
							<u-form-item label="时长设置" prop="minWatchTime" key="minWatchTime" required>
								<view class="form_right">
									<view class="input_number">
										<input v-model="formData.minWatchTime" type="number"  max="9999" maxlength="4" 
										class="input_border" @input="watchTimeChange"></input>
									</view>
									<text class="right_label">分钟</text>
								</view>
							</u-form-item>
							<view class="divider"></view>
						</template>
						<template v-if="formData.type == 1 && formData.commandShowType == 2">
							<u-form-item label="开奖前" prop="commandShowLimitTime" key="commandShowLimitTime" required>
								<view class="form_right">
									<view class="input_number">
										<input v-model="formData.commandShowLimitTime" @input="prizeChange"  type="number" max="9999" maxlength="4" class="input_border"></input>
									</view>
									<text class="right_label">分钟可见</text>
								</view>
							</u-form-item>
							<view class="divider"></view>
						</template>
						<template v-if="formData.type == 1 && formData.commandShowType == 3">
							<u-form-item label="提示文案" prop="commandInvisibleText" key="commandInvisibleText" required>
								<u--input v-model="formData.commandInvisibleText" placeholder="请输入提示文案" border="none"
									inputAlign="right" maxlength="20"></u--input>
							</u-form-item>
							<view class="divider"></view>
						</template>
						<u-form-item label="开奖时间" prop="publishTime" required>
							<view class="custom_input_container" @click="isShowDatePicker = true">
								<u--input v-model="formData.publishTime" placeholder="请选择时间" border="none"
									inputAlign="right" readonly class="custom_input"></u--input>
							</view>
							<u-icon name="arrow-right" color="#191919" class="arrow_right"></u-icon>
						</u-form-item>
					</view>
					<view class="item_card">
						<view class="card_title">奖品设置</view>
						<view v-for="(item, index) in formData.lotteryList" :key="index">
							<view class="card_index">
								<text>奖品{{ index === 0 ? '一' : '二' }}</text>
								<img v-if="formData.lotteryList.length > 1" src="@/static/image/deleteIcon.png"
									@click="deleteNum(index)"></img>
							</view>
							<u-form-item label="奖品名称" required>
								<u--input v-model="item.name" placeholder="请输入奖品名称 (限20个字)" border="none" maxlength="20"
									inputAlign="right" @blur="createPrize(item, index)"></u--input>
							</u-form-item>
							<template v-if="isValidate">
								<view v-if="!item.name && !item.noValidate" class="error_message">
									请输入奖品名称 (限20个字)
								</view>
							</template>
							<view class="divider"></view>
							<u-form-item label="奖品数量" required>
								<u--input v-model="item.num" placeholder="请输入奖品数量" border="none" type="number" min="1"
									max="2000" inputAlign="right" maxlength="4" @change="(e) => numChange(e,item)" @blur="createPrize(item, index)"></u--input>
							</u-form-item>
							<template v-if="isValidate">
								<view v-if="!item.num && !item.noValidate" class="error_message">
									请输入奖品数量
								</view>
							</template>
							<view class="divider"></view>
						</view>
						<view v-if="formData.lotteryList.length < 2" class="add_num" @click="addNum">+ 添加奖品</view>
					</view>
					<view class="item_card">
						<view class="card_title">兑换方式</view>
						<u-form-item label="兑奖信息填写" prop="checkType" class="no_margin_left">
							<view class="custom_input_container" @click="showPop('fillDjInfo', 'checkType')">
								<u--input v-model="labelMap.checkType" placeholder="兑奖信息填写" border="none" inputAlign="right"
									readonly class="custom_input"></u--input>
							</view>
							<u-icon name="arrow-right" color="#191919" class="arrow_right"></u-icon>
						</u-form-item>
						<view class="divider"></view>
						<template v-if="formData.checkType == 0">
							<u-form-item label="填写信息" prop="checkType" class="no_margin_left">
								<view class="custom_input_container" @click="showPop('fillInfo', 'addressType')">
									<u--input v-model="labelMap.addressType" placeholder="兑奖信息填写" border="none"
										inputAlign="right" readonly class="custom_input"></u--input>
								</view>
								<u-icon name="arrow-right" color="#191919" class="arrow_right"></u-icon>
							</u-form-item>
							<view class="divider"></view>
						</template>
						<u-form-item label="联系客服渠道" prop="contactType" class="no_margin_left">
							<view class="custom_input_container" @click="showPop('djMethods', 'contactType')">
								<u--input v-model="labelMap.contactType" placeholder="联系客服渠道" border="none"
									inputAlign="right" readonly class="custom_input"></u--input>
							</view>
							<u-icon name="arrow-right" color="#191919" class="arrow_right"></u-icon>
						</u-form-item>
						<view class="divider"></view>
						<template v-if="formData.contactType == 1">
							<u-form-item label="客服电话" prop="mobile" key="mobile" required>
								<u--input v-model="formData.mobile" maxlength="11" placeholder="请输入客服电话" border="none"
									inputAlign="right"></u--input>
							</u-form-item>
							<view class="left_btn" @click="viewExample('phone')">查看示例</view>
						</template>
						<template v-if="formData.contactType == 2">
							<u-form-item label="添加微信" prop="qrCode" key="qrCode" required>
								<view class="upload_container" @click="uploadWechat">
									<view v-if="formData.qrCode" class="img_container">
										<img :src="formData.qrCode" mode="scaleToFill"></img>
									</view>
									<view v-else class="upload_placeholder"></view>
								</view>
							</u-form-item>
							<div class="left_btn">
								<view @click="viewExample('wx')">查看示例</view>
								<view v-if="formData.qrCode" @click="previewImg(formData.qrCode)">预览</view>
							</div>
						</template>
					</view>
					<view class="item_card">
						<view class="card_title">关联直播</view>
						<u-form-item label="直播名称" prop="liveId" class="no_margin_left">
							<view class="custom_input_container" @click="isShowLive = true">
								<u--input v-model="labelMap.liveName" placeholder="请选择直播" border="none" inputAlign="right"
									readonly class="custom_input"></u--input>
							</view>
							<u-icon v-if="!labelMap.liveName" name="arrow-right" color="#191919"
								class="arrow_right"></u-icon>
							<u-icon v-else name="close-circle" color="#191919" class="arrow_right"
								@click="resetLive"></u-icon>
						</u-form-item>
					</view>
				</u-form>
				<view class="agreement">
					<u-checkbox-group v-model="isAgree">
						<u-checkbox :value="true" />
					</u-checkbox-group>
					我已阅读并同意
					<text @click="viewAgreement">《微乐播抽奖活动管理规范》</text>
				</view>
				<view class="cj_space"></view>
			</scroll-view>
		</view>
		<view class="footer">
			<u-button type="primary" color="#295FFF" shape="circle" @click="createSweepstakes">{{ title }}</u-button>
		</view>
		<u-overlay :show="showExample" @click="showExample = false">
			<img v-if="exampleImage === 'kl'" class="example_image" src="@/static/image/kl.png" />
			<img v-if="exampleImage === 'phone'" class="example_image" src="@/static/image/phone.png" />
			<img v-if="exampleImage === 'wx'" class="example_image" src="@/static/image/wx.png" />
			<div class="closeImg">
				<img src="@/static/image/closeSl.png" alt="">
			</div>
		</u-overlay>
		<u-popup :show="isShowPop" round="12" @close="isShowPop = false" mode="bottom">
			<view class="pop-container">
				<view class="avatar-pop-box">
					<view v-for="(item, index) in constList" :key="index" class="pop-item" @click="selectItem(item)">
						{{ item.label }}
					</view>
				</view>
				<view class="pop-cancel-item" @click="isShowPop = false">
					取消
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="isShowDatePicker" v-model="timeValue" :minDate="minDate"
			@cancel="isShowDatePicker = false" @confirm="confirmDate" mode="datetime">
		</u-datetime-picker>
		<u-popup :show="isShowLive" @close="isShowLive = false" mode="bottom" :round="16" closeable>
			<view class="share-container">
				<view class="pop_title">
					关联直播
				</view>
				<view class="pop_body">
					<scroll-view scroll-y style="height: 750rpx;">
						<view class="pop_item" v-for="(item, index) in liveList" :key="index"
							@click="selectLive(item, index)" :class="{ selected: index === selectLiveIndex }">
							<view class="left">
								<view :class="['status', getStatusClass(item.status)]">{{ getStatusText(item.status) }}
								</view>
								<view class="name ex">{{ item.name }}</view>
							</view>
							<img v-if="index === selectLiveIndex" class="right" src="@/static/image/selected.png" />
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { canyuMethods, klViewMethods, fillDjInfo, djMethods, fillInfo } from './const';
import { txCosUpload } from '@/utils/txCosUpload'
export default {
	data() {
		return {
			title: '',
			pageTitle: '',
			labelStyle: {
				marginLeft: '10px',
			},
			constList: [],
			isAgree: [],
			liveList: [],
			isEdit: false,
			isShowPop: false,
			isValidate: false,
			showExample: false,
			isShowDatePicker: false,
			isShowLive: false,
			exampleImage: '',
			currentField: '',
			selectLiveIndex: null,
			labelMap: {
				type: '',
				commandShowType: '',
				checkType: '',
				contactType: '',
				addressType: '',
				liveName: ''
			},
			timeValue: Number(new Date()),
			minDate: Number(new Date()),
			formData: {
				name: '', // 活动名称
				type: 1, // 参与方法
				commandWord: '', // 口令内容
				minInviteUserNum: '1', // 人数
				commandShowType: 1, // 口令查看方式
				minWatchTime: '5', // 观看时长
				publishTime: this.formatDateTime(new Date()), // 开奖时间
				contactType: 1, // 联系客服
				addressType: 1, // 兑奖信息填写
				checkType: 1, //核销和兑奖信息
				mobile: '', // 拨打电话--联系电话
				qrCode: '', // 拨打电话--微信二维码
				liveId: '', // 直播名称
				commandShowLimitTime: '30', // 开奖前多少分钟可见抽奖口令
				commandInvisibleText: '观看直播获取口令', // 交互口令
				lotteryList: [    // 奖品信息列表
					{
						prizeId: '',
						name: '',
						num: ''
					}
				],
				inviteType: 1,
				prizeId:''
			},
			rules: {
				name: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
				commandWord: [{ required: true, message: '请输入口令内容 (限20个字)', trigger: 'blur' }],
				minInviteUserNum: [{ required: true, message: '请输入人数', trigger: 'blur' },
				{
					validator: (rule, value, callback) => {
						const num = Number(value);
						if (!Number.isInteger(num) || num <= 0 || num > 30) {
							callback(new Error('请输入正整数，最大30'));
						} else {
							callback();
						}
					}, trigger: 'blur'
				}],
				commandShowLimitTime: [
					{ required: true, message: '请输入开奖前时间', trigger: 'blur' },
					{
						validator: (rule, value, callback) => {
							const num = Number(value);
							if (!Number.isInteger(num) || num <= 0 || num > 9999) {
								callback(new Error('请输入正整数，最大9999'));
							} else {
								callback();
							}
						}, trigger: 'blur'
					}
				],
				minWatchTime: [{ required: true, message: '请输入参与分钟数，最长为720分钟', trigger: 'blur' },
				{
					validator: (rule, value, callback) => {
						const num = Number(value);
						if (!Number.isInteger(num) || num <= 0 || num > 720) {
							callback(new Error('请输入正整数，最大720'));
						} else {
							callback();
						}
					}, trigger: 'blur'
				},
				],
				commandInvisibleText: [{ required: true, message: '请输入提示文案', trigger: 'blur' }
				],
				mobile: [{ required: true, message: '请输入客服电话', trigger: 'blur' }, {
					validator: (rule, value, callback) => {
						return uni.$u.test.mobile(value);
					},
					message: '联系电话格式不正确',
					trigger: ['change', 'blur'],
				}],
				qrCode: [{ required: true, message: '请上传微信二维码图片', trigger: 'blur' }],
			}
		}
	},
	onLoad() {
		const sign = this.$route.query.sign
		if (sign === 'copy') {  // 复制
			this.getDetail('copy')
			this.title = '创建抽奖'
			this.pageTitle = '添加抽奖'
		} else if (sign === 'edit') {  // 编辑
			this.getDetail()
			this.isEdit = true
			this.title = '更新抽奖',
				this.pageTitle = '更新抽奖'
		} else {                 // 添加
			this.getLive()   // 获取直播活动
			this.initializeLabels()
			this.title = '创建抽奖',
				this.pageTitle = '添加抽奖'
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		inputChange(value, item) {
			item.isValidate = value ? false : true
		},
		deleteNum(index) {
			this.formData.lotteryList.splice(index, 1)
		},
		confirmDate(item) {
			this.formData.publishTime = this.formatDateTime(item.value)
			this.isShowDatePicker = false
		},
		viewAgreement() {
			uni.navigateTo({
				url: '/pages/lottery/specification'
			});
		},
		previewImg(img){
			uni.previewImage({
				current: 0,
				urls: [img]
			});
		},
		showPop(type, field) {
			this.isShowPop = true;
			this.currentField = field;
			switch (type) {
				case 'canyu':
					this.constList = canyuMethods;
					break;
				case 'klView':
					this.constList = klViewMethods;
					break;
				case 'fillDjInfo':
					this.constList = fillDjInfo;
					break;
				case 'djMethods':
					this.constList = djMethods;
					break;
				case 'fillInfo':
					this.constList = fillInfo;
					break;
				default:
					this.constList = [];
			}
		},
		selectItem(item) {
			// 去除字段残留值
			switch (this.currentField) {
				case 'type':
					if (this.formData[this.currentField] !== item.value) {
						this.formData.commandWord = '';
						this.formData.minInviteUserNum = '1';
						this.formData.minWatchTime = '5';
					}
					break;
				case 'commandShowType':
					if (this.formData[this.currentField] !== item.value) {
						this.formData.commandShowLimitTime = '30';
						this.formData.commandInvisibleText = '观看直播获取口令';
					}
					break;
				case 'contactType':
					if (this.formData[this.currentField] !== item.value) {
						this.formData.mobile = '';
						this.formData.qrCode = '';
					}
					break;
			}
			this.formData[this.currentField] = item.value;
			this.labelMap[this.currentField] = item.label;
			this.isShowPop = false;
		},
		initializeLabels() {
			this.updateLabel('type', canyuMethods);
			this.updateLabel('commandShowType', klViewMethods);
			this.updateLabel('checkType', fillDjInfo);
			this.updateLabel('contactType', djMethods);
			this.updateLabel('addressType', fillInfo);
		},
		updateLabel(field, methods) {
			const value = this.formData[field];
			const item = methods.find(method => method.value === value);
			if (item) {
				this.labelMap[field] = item.label;
			}
		},
		viewExample(imgUrl) {
			this.exampleImage = imgUrl
			this.showExample = true
		},
		addNum() {
			this.formData.lotteryList.push({
				prizeId: '',
				name: '',
				num: '',
				noValidate: true
			})
		},
		userNumChange(e){
			if (Number(e.detail.value) > 30) {
				this.$nextTick(() => {
				  this.formData.minInviteUserNum = 30
				});
			}
		},
		watchTimeChange(e){
			if (Number(e.detail.value) > 720) {
				this.$nextTick(() => {
				  this.formData.minWatchTime = 720
				});
			}
		},
		numChange(value,item) {
			if (Number(value) > 2000) {
				this.$nextTick(() => {
				  item.num = 2000
				});
			}
		},
		prizeChange(e) {
			if (Number(e.detail.value) > 9999) {
				this.$nextTick(() => {
				  this.formData.commandShowLimitTime = 9999
				});
			}
		},
		// 添加奖品
		async createPrize(item, index) {
			if (item.name && item.num) {
				const params = {
					name: item.name,
					num: Number(item.num)
				}
				const { data } = await this.$request(this.$Api.addPrizeNum, params, 'post')
				if(data.code != 200) return
				const { prizeId } = data.data
				item.prizeId = prizeId || ''
			}
		},
		// 获取活动详情
		async getDetail(type) {
			const id = this.$route.query.id
			const { data } = await this.$request(this.$Api.getPrizeDetail + '/' + id, {}, 'get')
			const content = JSON.parse(data.data.content)
			this.formData = {
				name: data.data.name,
				type: data.data.type,
				commandWord: content.commandWord,
				minInviteUserNum: String(content.minInviteUserNum),
				commandShowType: content.commandShowType,
				minWatchTime: String(content.minWatchTime),
				// publishTime: this.$route.query.sign === 'copy' ? this.formatDateTime(new Date()) : this.formatDateTime(new Date(data.data.publishTime)),
				publishTime: this.$route.query.sign === 'copy' ? '' : this.formatDateTime(new Date(data.data.publishTime)),
				contactType: data.data.contactType,
				addressType: data.data.addressType,
				mobile: data.data.mobile,
				qrCode: data.data.qrCode,
				liveId: this.$route.query.sign === 'copy' || data.data.liveId == 0 ? '' : data.data.liveId,
				commandShowLimitTime: content.commandShowLimitTime,
				commandInvisibleText: content.commandInvisibleText,
				lotteryList: data.data.prizeList,
				checkType: data.data.checkType,
				inviteType: content.inviteType
			};
			// 初始化tab
			this.initializeLabels()
			// 回显直播活动
			const params = {
				page: 1,
				pageSize: 100000,
				status: '1,2,5',
			}
			const res = await this.$request(this.$Api.getliveList, params, 'get')
			this.liveList = res.data.data
			this.selectLiveIndex = this.liveList.findIndex(item => this.formData.liveId === item.liveId)
			this.labelMap.liveName = this.liveList.find(item => this.formData.liveId === item.liveId)?.name

		},
		// 创建抽奖活动
		createSweepstakes() {
			this.isValidate = true
			this.formData.lotteryList.forEach(item => {
				item.noValidate = false
			})
			this.$refs.form.validate().then(async (valid) => {
				if (valid) {
					// 检查是否有任何一个 item.num 或 item.name 为空
					const hasInvalidItem = this.formData.lotteryList.some(item => !item.num || !item.name);
					if (hasInvalidItem) {
						return;
					}
					if (!this.isAgree.length) {
						return uni.showToast({
							title: '请先阅读并同意《微乐播抽奖活动管理规范》',
							icon: 'none',
							duration: 2000
						})
					}
					// 上传参数
					var prizeIds = ''
					if (this.formData.lotteryList.length > 0) {
						this.formData.lotteryList.forEach((item) => {
							prizeIds += `,${item.prizeId}`
							if (item.num > 2000 || item.num < 1) {
								prizeIds = ''
								return uni.showToast({
									title: '奖品数量范围1~2000',
									icon: 'none',
									duration: 2000
								})
							}
						});
					}
					console.log('上传参数',this.formData.lotteryList)
					if (prizeIds == '') return false
					prizeIds = prizeIds.slice(1)
					const params = {
						liveId: this.formData.liveId || undefined,
						name: this.formData.name,
						type: this.formData.type,
						content: JSON.stringify({
							commandWord: this.formData.commandWord,
							commandShowType: this.formData.commandShowType,
							commandShowLimitTime: Number(this.formData.commandShowLimitTime),
							commandInvisibleText: this.formData.commandInvisibleText,
							minWatchTime: Number(this.formData.minWatchTime),
							inviteType: Number(this.formData.inviteType),
							minInviteUserNum: Number(this.formData.minInviteUserNum),
						}),
						prizeIds: prizeIds,
						contactType: this.formData.contactType,
						addressType: this.formData.addressType,
						mobile: this.formData.mobile,
						qrCode: this.formData.qrCode,
						publishTime: `${this.formData.publishTime.slice(0, 16)}:00`,
						checkType: this.formData.checkType
					};
					const sign = this.$route.query.sign
					let res = {}
					if (sign === 'new' || sign === 'copy') {
						res = await this.$request(this.$Api.createPrizeNum, params, 'post')
					} else {
						params.drawActivityId = this.$route.query.id;
						res = await this.$request(this.$Api.updataPrizeNum, params, 'post')
					}
					if (res.data.code !== 200) {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 1500,
						});
						return
					}
					const showTitle = sign === 'edit' ? '更新成功！' : '创建成功！'
					uni.showToast({
						title: showTitle,
						icon: 'none',
						duration: 1500,
						success: function () {
							setTimeout(function () {
								uni.redirectTo({
									url: '/pages/lottery/index'
								});
							}, 1500);
						}
					});
				}
			}).catch((e) => { });
		},
		formatDateTime(value) {
			// 格式化日期时间为YYYY-MM-DD HH:mm的字符串
			let date = new Date(value);
			let year = date.getFullYear();
			let month = this.padStart(date.getMonth() + 1);
			let day = this.padStart(date.getDate());
			let hours = this.padStart(date.getHours());
			let minutes = this.padStart(date.getMinutes());
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		padStart(value) {
			return value.toString().padStart(2, '0');
		},
		async getLive() {
			const params = {
				page: 1,
				pageSize: 100000,
				status: '1,2,5',
			}
			const { data } = await this.$request(this.$Api.getliveList, params, 'get')
			this.liveList = data.data
		},
		uploadWechat() {
			const vm = this
			this.$utils.androidAlbum(this)
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: async (res1) => {
					const file = res1.tempFiles[0];
					const params = {
						scene: 'wechat'
					}
					txCosUpload(file, params, (progressData) => {
						// 实现进度条，目前没用到
					},).then(res => {
						uni.showToast({
							title: '图片上传成功',
							icon: 'none',
							duration: 1500
						})
						vm.formData.qrCode = res.fileUrl
					})
				}
			});
		},
		selectLive(item, index) {
			this.selectLiveIndex = index;
			this.labelMap.liveName = item.name
			this.formData.liveId = item.liveId
			this.isShowLive = false
		},
		resetLive() {
			this.selectLiveIndex = null;
			this.labelMap.liveName = ''
			this.formData.liveId = ''
		},
		getStatusText(status) {
			switch (status) {
				case 1:
					return '未开播';
				case 2:
					return '开播中';
				case 5:
					return '暂停中';
				default:
					return '未知状态';
			}
		},
		getStatusClass(status) {
			switch (status) {
				case 1:
					return 'status_no';
				case 2:
					return 'status_living';
				case 5:
					return 'status_pause';
				default:
					return '';
			}
		},
	}
}
</script>

<style lang="scss" scoped>
page{
	background: #F6F9FF;
}
.input_border{
	text-align: right;
}
.closeImg{
	margin-top: 80rpx;
	width: 44rpx;
	height: 44rpx;
	position: absolute;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -50%);
	img{
		width: 100%;
		height: 100%;
	}
}
.container {
	position: relative;
	height: 100vh;
	overflow-y: hidden;
	background: url('@/static/image/my_set_bg.png') no-repeat center center;
	background-size: cover;

	::v-deep .u-navbar__content__left__text {
		font-weight: 500;
		font-size: 32rpx;
	}

	.divider {
		border-bottom: 1rpx solid #E3E8EE;
		margin: 24rpx 0;
	}

	.no_margin_bottom {
		margin-bottom: 0;
	}

	.u-form {
		::v-deep .u-form-item__body {
			padding: 10rpx 0;
		}

		::v-deep .u-form-item__body__left__content__required {
			left: -1px;
		}

		.no_margin_left {
			::v-deep .u-form-item__body__left__content__label {
				margin-left: 0 !important;
			}
		}

		.form_item_disabled {
			::v-deep .u-form-item__body__left__content__label {
				color: #DBDCDE !important;
			}

			::v-deep .u-input__content__field-wrapper__field {
				color: #DBDCDE !important;
			}

			::v-deep .u-icon__icon {
				color: #DBDCDE !important;
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		margin-top: 96rpx;
		height: calc(100vh - 96rpx);
		box-sizing: border-box;
		padding: 0 32rpx;

		.content_scroll_view {
			height: calc(100vh - 210rpx);

			.item_card {
				background-color: #ffffff;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 20rpx;

				.custom_input_container {
					width: 100%;

					.custom_input {
						pointer-events: none;
					}
				}

				.form_right {
					width: 100%;
					justify-content: right;
					align-items: center;
					display: flex;

					.input_number {
						width: 146rpx;

						.u-input--radius {
							border-radius: 16rpx;
						}
					}

					.left_label {
						margin-right: 16rpx;
					}

					.right_label {
						margin-left: 16rpx;
					}
				}

				.card_title {
					height: 34rpx;
					line-height: 34rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #8C8C8C;
					margin-bottom: 24rpx;
				}

				.arrow_right {
					margin-left: 16rpx;
				}

				.left_btn {
					width: 100%;
					height: 34rpx;
					line-height: 34rpx;
					display: flex;
					justify-content: space-between;
					font-weight: 400;
					font-size: 24rpx;
					color: #295EFF;
				}

				.card_index {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #295EFF;
					line-height: 40rpx;
					margin-bottom: 32rpx;

					img {
						width: 24rpx;
						height: 28rpx;
					}
				}

				.error_message {
					line-height: 12px;
					text-align: right;
					font-size: 12px;
					color: #f56c6c;
				}

				.add_num {
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					border-radius: 8rpx;
					font-size: 26rpx;
					color: #295EFF;
					border: 2rpx solid #295EFF;
				}

				.upload_container {
					display: flex;
					justify-content: right;
					width: 100%;
					overflow: hidden;
					position: relative;

					.img_container {
						width: 142rpx;
						height: 134rpx;
						border: 2rpx solid #979797;
					}

					img {
						width: 100%;
					}

					.upload_placeholder {
						width: 142rpx;
						height: 134rpx;
						background: url('@/static/image/wx_upload.png') no-repeat center center;
						background-size: cover;
					}
				}
			}

			.agreement {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #464C5B;
				margin: 50rpx 0;

				text {
					color: #295EFF;
				}
			}
		}
	}

	.cj_space {
		width: 100%;
		height: 1rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
		display: flex;
		align-items: center;
	}

	.example_image {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		max-height: 100%;
		max-width: 70%;
	}

	.pop-container {
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0 0;

		.pop-item {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F2F2F2;

			&:last-of-type {
				border-bottom: 16rpx solid #F2F2F2;
			}
		}

		.pop-cancel-item {
			background-color: #FFFFFF;
			padding: 32rpx 0;
			margin-top: 16rpx;
		}
	}

	.share-container {
		position: relative;
		box-sizing: border-box;

		.pop_title {
			font-weight: 500;
			font-size: 32rpx;
			color: #464C5B;
			text-align: center;
			margin: 28rpx 0;
		}

		.pop_body {
			.pop_item {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;
				padding: 12rpx 26rpx;
				color: #464C5B;

				&.selected {
					color: #295EFF !important;
					background: linear-gradient(90deg, #E3EAFF 0%, rgba(255, 255, 255, 0) 100%);
				}

				.left {
					flex: 1;
					display: flex;
					align-items: center;

					.status {
						width: 104rpx;
						height: 46rpx;
						line-height: 46rpx;
						text-align: center;
						background: #00C795;
						border-radius: 8rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-right: 16rpx;

						&.status_no {
							background: #8C8C8C;
						}

						&.status_living {
							background: #00C795;
						}

						&.status_pause {
							background: #FF5A5F;
						}
					}

					.name {
						font-size: 28rpx;
					}
				}

				.right {
					width: 28rpx;
					height: 24rpx;
				}
			}
		}
	}
}</style>

